<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加账单</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: black;
        }

        body {
            background: black;
        }

    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-select style="width: 400px" v-model="bill.consumptionType" placeholder="请选择消费类型" clearable
                   @change="queryConsumptionContent">
            <el-option
                    v-for="item in consumptionTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br><br>
        <el-select style="width: 400px" v-model="bill.consumptionContent" placeholder="请选择消费内容" clearable>
            <el-option
                    v-for="item in consumptionContents"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br><br>
        <el-select style="width: 100%" v-model="bill.accountType" placeholder="请选择账户类型" clearable>
            <el-option
                    v-for="item in accountTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br><br>
        <el-input class="box" placeholder="请输入消费物品" v-model="bill.consumptionObject" maxlength="12" clearable>
            <template slot="prepend">消费物品</template>
        </el-input>
        <br><br>
        <el-input class="box" placeholder="请输入商品总价" v-model="bill.consumptionAmount" >
            <template slot="prepend">商品总价</template>
        </el-input>
        <br><br>
        <i style="color: white" class="el-icon-star-off"></i><font color="white">(重要性)</font>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-radio-group v-model="bill.necessityStr" size="medium">
            <el-radio-button label="必要"></el-radio-button>
            <el-radio-button label="可以不花"></el-radio-button>
            <el-radio-button label="完全没必要"></el-radio-button>
        </el-radio-group>
        <br><br>
        <font style="color: white">账单所属时间：</font><el-date-picker style="width: 285px" v-model="bill.createTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <br><br>
        <el-button style="width: 400px" class="box" type="primary" @click="submit">提交</el-button>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            ruleForm: {
                username: "",
                password: "",
                realName: "",
                sex: "",
                birthday: ""
            },
            consumptionTypes: [],
            consumptionContents: [],
            bill: {
                username: "",
                consumptionType: "",
                consumptionContent: "",
                consumptionObject: "",
                consumptionQuantity: "",
                unitPrice: "",
                consumptionAmount: "",
                necessityStr: "",
                createTime: ""
            },
            accountTypes: []
        },
        created() {
            // 对cookie操作
            var cookies = document.cookie;
            var cookie_array = cookies.split(";");
            for (var i = 0; i < cookie_array.length; i++) {
                var cookie = cookie_array[i];
                var array = cookie.split("=");
                if (array[0] == " username") {
                    this.bill.username = array[1];
                }
            }
        },
        methods: {
            queryAccountType(){
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryAccountType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.accountTypes.push(arr);
                    });
                });
            },
            addBill() {
                axios.post('https://3723r72n06.picp.vip/mylife/bill/addBill', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                        setTimeout(() => {
                            location.href = "../options/options.html";
                        }, 1000);
                    } else if (response.data.code == 1002 || response.data.code == 1000) {
                        this.$message.warning(response.data.msg);
                    }
                });
            },
            queryConsumptionType() {
                //获取consumptionTypes
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.consumptionTypes.push(arr);
                    });
                });
            },
            queryConsumptionContent() {
                //获取consumptionContents
                this.consumptionContents=[];
                this.bill.consumptionContent="";
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionContent', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.consumptionContents.push(arr);
                    });
                });
            },
            submit() {
                axios.post('https://3723r72n06.picp.vip/mylife/bill/addBill', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                        setTimeout(() => {
                            location.href = "queryBill.html";
                        }, 1000);
                    } else if (response.data.code == 1003) {
                        this.$message.warning(response.data.msg);
                    }
                });
            },
            getDate() {
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth()+1;
                if (month < 10) {
                    month = "0" + month;
                }
                let day = date.getDate();
                if (day < 10) {
                    day = "0" + day;
                }
                let hour = date.getHours();
                if (hour < 10) {
                    hour = "0" + hour;
                }
                let minute = date.getMinutes();
                if (minute < 10) {
                    minute = "0" + minute;
                }
                let second = date.getSeconds();
                if (second < 10) {
                    second = "0" + second;
                }
                this.bill.createTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
            }
        },
        mounted() {
            this.queryAccountType();
            this.queryConsumptionType();
            this.getDate();
        }
    });
</script>
</html>